{% extends 'base.html' %}

{% block title %}
    文章详情
{% endblock %}

{% block top_css %}
    <!--引入Font Awesome字体库样式表-->
    <link rel="stylesheet" href="/static/css/font-awesome.min.css"
          tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/css/font-awesome.min.css">
    <!--引入guojian.min.css组件样式表-->
    <link rel="stylesheet" href="/static/css/guojian.min.css"
          tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/css/guojian.min.css">
    <!--引入style.css自定义样式表-->
    <link rel="stylesheet" href="/static/css/style.css"
          tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/css/style.css">
    <!--引入jquery.min.js组件脚本-->
    <script src="/static/js/jquery-1.12.4.min.js"
            tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/js/jquery-1.12.4.min.js"
            type="text/javascript"></script>
{% endblock %}

{% block top_js %}
    <!--引入jquery.min.js组件脚本-->
    <script src="/static/js/jquery-1.12.4.min.js"
            tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/js/jquery-1.12.4.min.js"
            type="text/javascript"></script>
    <style type="text/css">
        body {
            background-image: none;
        }

        .gj-content .gj-cont pre, .gj-zp-cont .gj-cont pre {
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
    </style>
    <script>
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
        })
    </script>
{% endblock %}

{% block content %}
    <div class="gj-lg-8">

        <div class="gj-wk gcl-hb">
            <!--内容页模块-->
            <nav class="gj-ljdh">
                <i class="fa fa-home" aria-hidden="true"></i>
                <a href="index.html" tppabs="http://demo.demohuo.top/modals/63/6398/demo/index.html">首页</a> &gt; <a
                    href="index1.html" tppabs="http://demo.demohuo.top/modals/63/6398/demo/index1.html"
                    title="知识干货">知识干货</a></nav>
            <div class="gj-body gj-content">
                <div class="gj-title">
                    <h3>{{ blog.title }}</h3>
                    <span>发布时间：{{ blog.create_time.strftime('%Y-%m-%d %H:%M:%S') }}</span>
                    {#                            <a href="javascript:;" target="_blank">已收录</a>#}
                    {#                        <span class="hidden-xs">作者：{{ blog.author }}</span>#}
                    <span>阅读：{{ blog.read_count }}次</span>
                    <div class="gjcont-fx bdsharebuttonbox hidd-xs">
                        <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                        <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                        <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                        <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                        <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
                        <a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a>
                        <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
                        <a href="#" class="bds_meilishuo" data-cmd="meilishuo" title="分享到美丽说"></a>
                        <a href="#" class="bds_mogujie" data-cmd="mogujie" title="分享到蘑菇街"></a>
                        <a href="#" class="bds_huaban" data-cmd="huaban" title="分享到花瓣"></a>
                        <a href="#" class="bds_youdao" data-cmd="youdao" title="分享到有道云笔记"></a>
                        <a href="#" class="bds_ty" data-cmd="ty" title="分享到天涯社区"></a>
                        <a href="#" class="bds_isohu" data-cmd="isohu" title="分享到我的搜狐"></a>
                        <a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
                        <a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a>
                        <a href="#" class="bds_print" data-cmd="print" title="分享到打印"></a>
                        <a href="#" class="bds_copy" data-cmd="copy" title="分享到复制网址"></a>
                    </div>
                    <script>
                        window._bd_share_config = {
                            "common": {
                                "bdSnsKey": {},
                                "bdText": "",
                                "bdMini": "2",
                                "bdMiniList": false,
                                "bdPic": "",
                                "bdStyle": "0",
                                "bdSize": "24"
                            },
                            "share": {}
                        };
                        with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com//static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
                    </script>
                </div>
                <div class="gj-cont">
                    {{ blog.content|safe }}
                </div>
                <div class="gcont-page">
                    <div class="gj-lg-6">上一篇：<a href="{{ url('boke:blog',args=(blog.id - 1,)) }}"
                                                tppabs="http://demo.demohuo.top/modals/63/6398/demo/4.html">{{ last_blog.title }}</a>
                    </div>
                    <div class="gj-lg-6">下一篇：<a href="{{ url('boke:blog',args=(blog.id + 1,)) }}"
                                                tppabs="http://demo.demohuo.top/modals/63/6398/demo/13.html">{{ next_blog.title }}</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="gj-wk gcl-hb">
            <!--内容页版权模块-->
            <div class="gj-body gj-bq">
                <img src="{{ blog.user.avatar_url }}"
                     tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/touxiang.jpg" alt="">
                <p><b>版权声明：</b>本站原创文章，于2018-03-13 11:29:56，由 <b>Mr.郭</b> 发表！</p>
                <p><b>转载请注明：</b><a href="">phpStudy最新使用教程 - 让天下没有难配的php环境</a> - <b>郭健博客</b></p>
            </div>
        </div>

        <div class="gj-wk gcl-hb">
            <div class="gj-bt">
                <h3><i class="fa fa-commenting" aria-hidden="true"></i> 评论区</h3>
            </div>
            <div class="gj-body gj-pl">
                <div class="comment">
                    <div class="com_form">
                        <form action="javascript:if(confirm('https://www.guojian945.com/comment/index/init.html?modelid=1&catid=12&id=8&title=phpStudy最新使用教程 - 让天下没有难配的php环境&url=http://www.guojian945.com/study/8.html&dosubmit=提交  \n\n���ļ��޷��� Teleport Ultra ����, ��Ϊ ����һ�����·���ⲿ������Ϊ������ʼ��ַ�ĵ�ַ��  \n\n�����ڷ������ϴ���?'))window.location='https://www.guojian945.com/comment/index/init.html?modelid=1&catid=12&id=8&title=phpStudy最新使用教程 - 让天下没有难配的php环境&url=http://www.guojian945.com/study/8.html&dosubmit=提交'"
                              tppabs="https://www.guojian945.com/comment/index/init.html?modelid=1&catid=12&id=8&title=phpStudy最新使用教程 - 让天下没有难配的php环境&url=http://www.guojian945.com/study/8.html&dosubmit=提交"
                              method="post" onsubmit="return check_comm(this)">
                            <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrftoken }}">
                            <input type="hidden" name="modelid" value="1">
                            <input type="hidden" name="catid" value="12">
                            <input type="hidden" name="id" value="8">
                            <input type="hidden" name="title" value="phpStudy最新使用教程 - 让天下没有难配的php环境">
                            <input type="hidden" name="url" value="http://www.guojian945.com/study/8.html">
                            <textarea class="textarea" id="content" name="content" placeholder="朕有话要说~"></textarea>
                            <p><input type="button" class="sub_btn sub" id="sub" name="dosubmit" value="提交"><span
                                    class="emotion">表情</span></p>
                        </form>
                    </div>
                </div>
            </div>
            <div class="gpl-bt">
                共0条评论
            </div>
            <ul class="gpl-ul">
                <li>再精彩的文章也需要精湛的评论才能称得上完美~</li>
                {% for comment in comments %}
                    <li>
                        <div class="gpl-user">
                            <a href="0.html" tppabs="http://demo.demohuo.top/modals/63/6398/demo/0.html"
                               target="_blank"><img class="gpl-tx" src="{{ comment.user.avatar_url }}"
                                                    tppabs="http://demo.demohuo.top/modals/63/6398/demo/static/picture/default.gif"
                                                    alt=""></a>
                            <a href="0.html" tppabs="http://demo.demohuo.top/modals/63/6398/demo/0.html"
                               target="_blank">
                                <h4>{{ blog.user }}</h4>
                            </a>
                        </div>
                        {% if comment.comment_id.comment_id %}
                            <p class="gpl-cont"><span class="original_comment">

                                    <a
                                            href="javascript:void(0);" class="user_name"
                                            rel="nofollow">{{ blog.user.username }}</a> :
                                    {{ comment.comment_id.comment_id.content }} </span>

                                <span class="original_comment">
                                    <a
                                            href="javascript:void(0);"
                                            class="user_name"
                                            rel="nofollow">{{ blog.user.username }}</a>：{{ comment.comment_id.content }}
                                    </span>

                                <a
                                        href="javascript:void(0);" class="user_name"
                                        rel="nofollow"></a>：{{ comment.content }}</p>
                        {% elif comment.comment_id %}
                            <p class="gpl-cont">

                                    <span class="original_comment">
                                    <a
                                            href="javascript:void(0);"
                                            class="user_name"
                                            rel="nofollow">{{ blog.user.username }}</a>：{{ comment.comment_id.content }}
                                    </span>

                                <a
                                        href="javascript:void(0);" class="user_name"
                                        rel="nofollow"></a>：{{ comment.content }}</p>
                        {% else %}
                            <p class="gpl-cont">{{ comment.content }}</p>

                        {% endif %}
                        <div class="gpl-list">
                            <p><span>{{ comment.create_time.strftime('%Y-%m-%d %H:%M:%S') }}</span><a
                                    href="javascript:toreply('{{ comment.id }}');">回复</a></p>
                            <div id="rep_{{ comment.id }}" class="none">
                                <form action="javascript:if(confirm('https://www.guojian945.com/comment/index/init.html?modelid=1&amp;catid=17&amp;id=11&amp;title=一个可怕的现象愈演愈烈：穷人家的“富二代”越来越多&amp;url=https://www.guojian945.com/article/11.html&amp;reply=66&amp;reply_to=郭健博客网友&amp;dosubmit=提交  \n\n���ļ��޷��� Teleport Ultra ����, ��Ϊ ����һ�����·���ⲿ������Ϊ������ʼ��ַ�ĵ�ַ��  \n\n�����ڷ������ϴ���?'))window.location='https://www.guojian945.com/comment/index/init.html?modelid=1&amp;catid=17&amp;id=11&amp;title=一个可怕的现象愈演愈烈：穷人家的“富二代”越来越多&amp;url=https://www.guojian945.com/article/11.html&amp;reply=66&amp;reply_to=郭健博客网友&amp;dosubmit=提交'"
                                      tppabs="https://www.guojian945.com/comment/index/init.html?modelid=1&amp;catid=17&amp;id=11&amp;title=一个可怕的现象愈演愈烈：穷人家的“富二代”越来越多&amp;url=https://www.guojian945.com/article/11.html&amp;reply=66&amp;reply_to=郭健博客网友&amp;dosubmit=提交"
                                      method="post" onsubmit="return check_rep(this)">
                                    <input type="hidden" name="modelid" value="1">
                                    <input type="hidden" name="catid" value="17">
                                    <input type="hidden" name="id" value="11">
                                    <input type="hidden" name="title" value="一个可怕的现象愈演愈烈：穷人家的“富二代”越来越多">
                                    <input type="hidden" name="url"
                                           value="https://www.guojian945.com/article/11.html">
                                    <input type="hidden" name="reply" value="66">
                                    <input type="hidden" name="reply_to" value="郭健博客网友">
                                    <textarea name="content" class="textarea textarea2"
                                              placeholder="我来说两句~" id="content_reply"></textarea>
                                    <input type="button" class="sub_btn static reply" name="dosubmit" id="reply"
                                           comment_id="{{ comment.id }}" value="提交">
                                </form>
                            </div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>

    </div>
{% endblock %}

{% block bottom_js %}
    <script type="text/javascript" src="/static/js/jquery-1.8.2.min.js"
            tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/static/js/js.js"
            tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/js/js.js"></script>
    <script type="text/javascript" src="/static/js/jquery.qqFace.js"
            tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/js/jquery.qqFace.js"></script>
    <script type="text/javascript">
        function getCookie(name) {
            var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
            return r ? r[1] : undefined;
        }

        $('#sub').click(function () {
            var url = window.location.href;
            var blog_id = url.charAt(url.length - 1);
            var comment_id = $(this).attr('comment_id');

            var username = getCookie('username');
            if (!username) {
                alert('未登录')
                return
            }

            alert(comment_id);
            $.ajax({
                url: "/comment/",
                type: "post",
                dataType: 'json',
                headers: {
                    "X-CSRFToken": getCookie('csrftoken')
                },
                data: {
                    content: $("#content").val(),
                    blog_id: blog_id,
                    comment_id: comment_id,
                },
                success: function (data) {
                    if (data.code_s == 0) {
                        alert(data.errmsg);
                        location.reload()
                    } else {
                        alert(data.errmsg);
                        window.location = '/detail/'
                    }
                    {#$(".ret").val(data)#}
                }
            })
        });

        $('.reply').click(function () {
            var url = window.location.href;
            var blog_id = url.charAt(url.length - 1);
            var comment_id = $(this).attr('comment_id');
            alert(comment_id);
            $.ajax({
                url: "/comment/",
                type: "post",
                dataType: 'json',
                headers: {
                    "X-CSRFToken": getCookie('csrftoken')
                },
                data: {
                    content: $(this).prev().val(),
                    blog_id: blog_id,
                    comment_id: comment_id,
                },
                success: function (data) {
                    if (data.code_s == 0) {
                        alert(data.errmsg);
                        location.reload()
                    } else {
                        alert(data.errmsg);
                        window.location = '/'
                    }
                    {#$(".ret").val(data)#}
                }
            })
        });

    </script>

    <!--引入guojian.min.js组件脚本-->
    <script src="/static/js/guojian.min.js"
            tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/js/guojian.min.js"
            type="text/javascript"></script>
    <script type="text/javascript">
        function getCookie(name) {
            var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
            return r ? r[1] : undefined;
        }

        //一开始 就请求一次验证码
        var id = Math.random();
        $("#captcha_img").prop('src', "{{ url("verifications:img_code") }}?id=" + id);

        //点击图片 修改验证码 其实就是重新请求
        $("#captcha_img").click(function () {
            var id = Math.random();
            //修改请求路径后面的参数，每次不一样，这样就可以重新请求图片了
            $(this).prop('src', "{{ url("verifications:img_code") }}?id=" + id)
        });

        $('.change').click(function () {
            $.ajax({
                url: "{{ url('users:password') }}",
                type: "GET",
                {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
                data: '',
                success: function (data) {
                    if (data.code_s == 4101) {
                        alert(data.errmsg);
                        window.location = '/'
                    } else {
                        window.location = '/password/'
                    }
                },
                error: function (error) {
                    console.log(error)
                }
            })
        });

        $('.category').click(function () {
            $.ajax({
                {% for category in categories %}
                    url: "{{ url('index:my_index',args=(1,category.id)) }}",
                {% endfor %}
                type: "GET",
                {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
                data: '',
                success: function (data) {
                    if (data.code_s == 4101) {
                        alert(data.errmsg);
                        window.location = '/'
                    } else {
                        window.location = '/password/'
                    }
                },
                error: function (error) {
                    console.log(error)
                }
            })
        });

        $('#send').click(function () {
            $.ajax({
                url: "{{ url('users:send_boke') }}",
                type: "GET",
                {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
                data: '',
                success: function (data) {
                    if (data.code_s == 4101) {
                        alert(data.errmsg);
                        window.location = '/'
                    } else {
                        window.location = '/send_boke/'
                    }
                },
                error: function (error) {
                    alert(123)
                    console.log(error)
                }
            })
        });

        $('#login').click(function () {
            $.ajax({
                url: "/login/",
                type: "post",
                dataType: 'json',
                headers: {
                    "X-CSRFToken": getCookie('csrftoken')
                },
                data: {
                    username: $("#username").val(),
                    password: $("#password").val(),
                    code: $("#captcha").val(),
                    uuid: document.getElementById("captcha_img").src.split('=')[1]
                },
                success: function (data) {
                    if (data.code_s == 0) {
                        alert(data.errmsg);
                        window.location = '/'
                    } else {
                        alert(data.errmsg);
                        window.location = '/'
                    }
                    {#$(".ret").val(data)#}
                }
            })
        });

        $('#logout').click(function () {
            $.ajax({
                url: "/logout/",
                type: "get",
                dataType: 'json',
                {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
                data: {},
                success: function (data) {
                    if (data.code_s == 0) {
                        alert(data.errmsg);
                        window.location = '/'
                    }
                    {#$(".ret").val(data)#}
                }
            })
        });

    </script>

{% endblock %}

{% block js_code %}
    <script type="text/javascript">
        $(function () {
            //评论QQ表情
            $('.emotion').qqFace({
                assign: 'content',
                path: 'https://www.guojian945.com/common//static/images/face/'

            });
        });
    </script>

    <script>
        /*GJ-UI响应式导航栏*/
        $(document).ready(function () {
            $(".gbar").click(function () {
                $(".gnav-ul").slideToggle("slow");
                return false
            })
        });
    </script>
    <script>
        /*返回顶部开始*/
        jQuery(function ($) {
            $('.gj-top').toTop({
                autohide: true,
                offset: 320,
                speed: 500,
                right: 15,
                bottom: 15
            })
        });
    </script>
{% endblock %}